<template>
	<div style="width: 100%; ">
	<view class="content"  >
		<image class="logo" src="/static///taptap.webp"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<form class="register-form" @submit="formSubmit">
			  <el-radio-group v-model="FormData.role">
			    <el-radio-button label="1">用户</el-radio-button>
			    <el-radio-button label="2">商家</el-radio-button>
			  </el-radio-group>
		<view class="username">
			<input name="name" placeholder="请输入用户名"  type="text" v-model="FormData.username" value="123"/>
		</view>
		<view class="text_line">	</view>	
		<view class="username">
			
			<input name="username" placeholder="请输入账号"  type="username" v-model="FormData.userid" value="123"/>
		</view>
		<view class="text_line">	</view>
		<view class="password">
			<input name="password" placeholder="请输入密码"  type="password" v-model="FormData.password" value="123"/>
		</view>
		<view class="text_line">	</view>	
		<view class="register_button">
		<button form-type="submit" class="is-hover" >注册</button>
		<button type="button"  class="is-hover" @click="resetForm">重新输入</button>
		</view>
		<view style="font-size: 15px; margin:10px; color:skyblue"  @click="login">已拥有账号？点击登录</view>
		</form>

	</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '注册',
				FormData: {
					role:'',
					name: '',
					userid:'',
					username: '',
					password: '',
				}
			}
		},
		methods: {
			formSubmit(formData){
				uni.showLoading({
					title:'登录中...',
					mask:true	
				})
				formData.preventDefault();
				const newFormData = formData.detail.value;
				newFormData.role = this.FormData.role;
				console.log(JSON.stringify(this.FormData));
				
				let new_url='none';
					if (newFormData.role == 1) {
					  new_url='http://192.168.2.194:8086/';
					} 
					else if (newFormData.role ==2) { 
					  new_url='http://192.168.2.127:8086/business/seller/add';
					}
				uni.request({ 
					url:new_url,
					method:'POST',
					data:formData.detail.value,
					// 返回成功的结果
					success(res){
					console.log(res.data);
					let icon = 'error';
					if (res.data.code === 1) { 
					  icon = 'success';
					} 
					uni.hideLoading()
					uni.showToast({
						title:res.data.message,
						duration:2000,
						icon:icon,
					})	
					
						
					if (res.data.code == 1 ) {
						setTimeout(()=>{
							
							uni.switchTab({
								url: '/pages/login/Login'
							});
					
						},2000)
						}
									
					},
					fail() {
						uni.hideLoading()
					},
				})
			},
			login() {
				this.$router.push('/pages/login/Login')
			},
			resetForm() {
				this.FormData= {
					role:'',
					name: '',
					userid:'',
					username: '',
					password: '',
				}
			}
			
		},
	
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 5rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: brown;
		margin-left: 20rpx;
	}
	.label{
		font-size:20px ;
		margin-left: 0;
	}
	
	.register_button{
		margin-top: 30rpx;
		width: 60vw;
		margin-left: 20px;
	}
	.register_button{
		margin-top: 40rpx;
		
	}
	.register-form{
		margin-top: 80rpx;
		width: 90vw;
		padding: 0 10vw;
		box-sizing: border-box;
	 /* 用于添加阴影效果 */
		box-shadow: 0 0 8rpx 6rpx rgba(255, 128, 80, 0.3);
		
		border-radius: 20rpx;
		
	}
	
	
	.register-form .username  input{
		margin-top: 15px;
		box-shadow: 0 0 8rpx 6rpx rgba(0, 0, 0, 0.2);
		height: 80rpx;
		border-radius: 10rpx;
		border-bottom:1px solid #87ceeb;
		

		
	}
	.register-form .password  input{
		margin-top: 15px;
		height: 80rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 8rpx 6rpx rgba(0, 0, 0, 0.2);
		border-bottom:1px solid #87ceeb
	}
	.is-hover {
		color: white;
		background-color: #179b16;
		margin-bottom: 15px;
	  }
	  .text_line{ 
		  
		/*盒子下边距，这里用来指定下划线距离文字的高度*/
		padding-bottom: 15px;
		
		/*设定一个2px，实线*/
	    border-bottom: 2px solid #228B22; 
	  }
	  .redio_color{
		  accent-color: rgb(78, 151, 48, 5);
	  }
	  ::v-deep .el-radio-button {
		margin-top: 20px;
	    
		/* 设置单选按钮之间的间隔 */
		margin-right: 20px; 
	    
		/* 设置单选按钮的默认背景色 */
		background-color: #00aaff !important; 
	    
		 /* 设置单选按钮的文字颜色 */
		color: #000000 !important;
	  }
		
	  /* 最后一个单选按钮不需要右边距 */
	  ::v-deep .el-radio-button:last-child {
	    margin-right: 0;
	  }
	  ::v-deep .el-radio-button__inner {
		 
		  /* 删除边框 */
	    border: 0 !important; 
	  }
	  
	  ::v-deep .el-radio-button.is-active .el-radio-button__inner {
	    
		/* 设置单选按钮激活状态下的背景色 */
		background-color: #ffaa00 !important; 
	    
		 /* 设置单选按钮激活状态下的文字颜色 */
		color: #000000 !important;
	  }
	  
	  /* 鼠标悬停状态的样式 */
	  ::v-deep .el-radio-button:hover .el-radio-button__inner {
		  
	     /* 设置单选按钮悬停状态下的背景色 */
		background-color: #ffffff !important;
	   
	   /* 设置单选按钮悬停状态下的文字颜色 */
		color: #ffaa00 !important; 
	  }

</style>
